<template>
  <div>

    <div>
      <img src="../image/my-top.png" height="16rem" width="22.3rem"/>
      <div>

        <div class="anniu" @click="toSetUp">
          <img src="../image/sit.png" alt="">
        </div>

        <van-row class="van-sss">
          <van-col span="6">
            <van-image
              round
              width="3.5rem"
              height="3.5rem"
              :src="findBy.customerHandImage"
              style="border: white 0.2rem solid"
            />
          </van-col>
          <van-col span="5">
            <div align="left">
              <p style="font-size: 1rem;color: snow">{{findBy.customerName}}</p>
              <p style="font-size: 0.8rem;color: snow;margin-top: 0.3rem">ID: {{findBy.customerInfId}}</p>
              <div style="border: snow 0.1rem solid;border-radius: 5rem;margin-top: 0.3rem;display: block;width: 5rem">
                <p style="text-align:center;font-size: 0.8rem;color: snow;">{{findBy.modifiedTime}}</p>
              </div>
            </div>
          </van-col>
          <van-col span="1"></van-col>
          <van-col span="5"></van-col>
        </van-row>

        <div align="center">
          <div class="card_ss">
            <van-row style="margin-top:10px">
              <van-col span="8">{{releaseNumber}}</van-col>
              <van-col span="8">{{fabulousNumber}}</van-col>
              <van-col span="8">{{this.shuerer+this.shueryi}}</van-col>
            </van-row>
            <van-row>
              <van-col span="8" @click="release()">发布</van-col>
              <van-col span="8">点赞</van-col>
              <van-col span="8" @click="shoucang" :to="'/MyFavorite'">
                收藏
                <!--<div :to="'/MyFavorite'" class="btn">-->
                 <!--<span> 收藏</span>-->
                <!--</div>-->
              </van-col>
            </van-row>
          </div>
        </div>

      </div>

      <van-row>
        <van-cell
          is-link
          :to="'/AllOrder'"
        >
          <van-row>
            <van-col span="17"><b>我的订单</b></van-col>
            <van-col span="7">
              查看订单
            </van-col>
          </van-row>
        </van-cell>
      </van-row>

      <van-grid
        :column-num="5"
        :border="false"
      >
        <van-grid-item
          v-for="(item, index) in nav_list"
          :key="index"
          :icon="item.icon"
          :text="item.title"
          @click="orderDetails(item,index)"
        />
        <van-grid-item
          v-for="(item, index) in nav_listTow"
          :key="index"
          :icon="item.icon"
          :text="item.title"
          @click="orderDetailsTwo()"
        />
      </van-grid>

      <p align="center">&nbsp;</p>
      <p align="center">&nbsp;</p>
      <div>

        <van-row>
          <van-col span="8"> <b>推荐工具</b></van-col>
          <van-col span="1"></van-col>
          <van-col span="3"></van-col>
          <van-col span="7"></van-col>
          <van-col span="5"></van-col>
        </van-row>
      </div>
      <p align="center">&nbsp;</p>

      <van-grid
        :column-num="4"
        :border="false"
      >
        <van-grid-item
          v-for="(tuijian, index) in tuijian_list"
          :key="index"
          :icon="tuijian.icon"
          :text="tuijian.title"
          :to="tuijian.path"
        />
      </van-grid>

    </div>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
  <!-- 我的收益 -->
    <div class="earnings">
      <div class="mine_earnings">
        <div class="one_Text">
          <span>我的收益</span>
        </div>
   <van-row>
        <van-cell
          is-link
          :to="'/Incomedetails'"
          class="second_text"
        >
          <van-row>
            <van-col  span="17" class="sconed_text">累计收益<span class="money"> {{this.depositShouyi}}</span></van-col>
            <van-col span="7">
              收入明细
            </van-col>
          </van-row>
        </van-cell>
      </van-row>
      </div>

    </div>

    <footer_active></footer_active>
  </div>
</template>
<script>
  import { listDeposit,getDeposit,updateDeposit } from "@/api/customer/deposit";
  import { longfindAllById } from "@/api/customerinf";
  import axios from 'axios'
import footer_active from './footer_active'
import {
  selectReleaseShu,
  selectFabulousShu,
} from '@/api/customer/local.js'

  import {galleryByCustomerId,gonglvListCount} from "@/api/gallery/gallery";

  export default {
  name: 'my_index',
  data () {
    return {
      findBy:Array,
      depositShouyi:'',
      listdep:[],
      tuijian_list: [
        {
          title: "客服中心",
          icon: "service-o",
          path: "terraceTel",
        },
        {
          title: "购物车",
          icon: "shopping-cart-o",
          path: "ShoppingCart",
        },
        {
          title: "申请售后",
          icon: "replay",
          path: "AfterSale",
        },
        {
          title: "代金券",
          icon: "balance-o",
          path: "my_vouchers",
        },
        {
          title: "我的评价",
          icon: "edit",
          path: "MyComment",
        },
        {
          title: "地址管理",
          icon: "location-o",
          path: "my_address",
        },
        {
          title: "保障服务",
          icon: "goods-collect-o",
          path: "my_security",
        },
        {
          title: "关于我们",
          icon: "pending-payment",
          path: "guan_yu",
        }


      ],

      nav_listTow:[
        {
          title: "施工订单",
          icon: require('../image/obligation.png'),
          path: "shigongdui",
        },
      ],

      nav_list: [
        //导航数据
        {
          title: "待付款",
          icon: require('../image/obligation.png'),
          path: "AllOrder",
        },
        {
          title: "待收货",
          icon: require('../image/send.png'),
          path: "AllOrder",
        },
        {
          title: "已完成",
          icon: require('../image/yes.png'),
          path: "AllOrder",
        },
        {
          title: "已退款",
          icon: require('../image/refund.png'),
          path: "AllOrder",
        },
      ],
      //全部订单的下标
      active:0,
      //用户发布的信息数量
      releaseNumber:0,
      //用户点赞的数量
      fabulousNumber:0,
      shoucangshu:0,
      shueryi:0,
      shuerer:0,

    }
  },
  //页面渲染前加载
  created(){
    this.listDeposit();
    this.getSelectReleaseShu();
    this.getSelectFabulousShu();
    this.findListBy();
    this.galleryByCustomer();
  },
  //方法调用
  methods:{
    galleryByCustomer(){

       galleryByCustomerId().then(res=>{
         this.shueryi = res.data
         console.log("==="+JSON.stringify(res.data))
       })

      gonglvListCount().then(res=>{
        this.shuerer=res.data
      })

       this.shoucangshu =(this.shueryi+this.shuerer)

    },

    findListBy(){
      longfindAllById().then(res=>{
        this.findBy = res.data.data
      })
    },

    listDeposit(){
      listDeposit().then(res=>{
        this.listdep = res.data;
      this.depositShouyi = res.data[0].depositShouyi;
      })
    },

    orderDetailsTwo(){
      this.$router.push({ path:'/shigongdui'})
    },

    orderDetails(item,index){
      switch (item.title) {
        case '待付款':
          this.active = 1;
          this.$router.push({ path:'/AllOrder',query:{active:this.active}})
          break;
        case '待收货':
          this.active = 3;
          this.$router.push({ path:'/AllOrder',query:{active:this.active}})
          break;
        case '已完成':
          this.active = 4;
          this.$router.push({ path:'/AllOrder',query:{active:this.active}})
          break;
        case '已退款':
          this.active = 5;
          this.$router.push({ path:'/AllOrder',query:{active:this.active}})
          break;
        default:
          this.$router.push({ path:'/AllOrder',query:{list:list}})
          break;
      }
    },
    // 前往设置页面
    toSetUp(){
      this.$router.push({path:"/SetUp"});
    },
    //用户的发布数量
    getSelectReleaseShu(){
      selectReleaseShu().then((res)=>{
        this.releaseNumber = res.data;
      })
    },

    shoucang(){
      this.$router.push({ path:'/MyFavorite'});
    },
    //点击发布去发布页面
    release(){
      this.$router.push({ path:'/MyRelease'});
    },
    //用户点赞的数量
    getSelectFabulousShu(){
      selectFabulousShu().then((res)=>{
        this.fabulousNumber = res.data;
      })
    },

  },
  //
  components: {
    footer_active
  }

}
</script>

<style>
.anniu {
  position: absolute;
  top: 0.4rem;
  left: 19rem;
}

.van-sss {
  position: relative;
  top: -7rem;
}
.card_ss {
  width: 19rem;
  position: absolute;
  top: 14rem;
  left: 1.7rem;
}
.earnings{
  width: 350px;
  height: 200px;
  margin: 0 auto;
}
.mine_earnings{
  width: 350px;
height: 126px;
line-height: 20px;
border-radius: 10px;
margin-top: -50px;
box-shadow: 2px 3px 4px 1px rgba(170, 170, 170, 15);
border: 1px solid rgba(255, 255, 255, 100);
}
.one_Text{
  width: 350px;
  height: 30px;
text-align: left;
}
.one_Text span{
  line-height: 30px;
  margin-left: 15px;
  color: rgba(16, 16, 16, 100);
font-size: 16px;
text-align: left;
font-family: PingFangSC-bold;
}
.second_text{
  width: 350px;
  height: 50px;
  text-align: left;
  margin: 0 auto;
  margin-top: 20px;
  float: left;
}
.money{
  color: rgba(16, 16, 16, 100);
font-size: 28px;
text-align: left;
font-family: PingFangSC-bold;
}
.sconed_text{
  color: rgba(153, 152, 152, 100);
font-size: 14px;
text-align: left;
font-family: PingFangSC-regular;
}
.card_ss{
  height: 60px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 2px 1px 0px 0px rgba(170, 170, 170, 15);
	border: 1px solid rgba(255, 255, 255, 100);
}
.btn{
  width: 60px;
  height: 20px;
}
.anniu img{
  width: 30px;
  height: 30px;
  margin: 10px;
}
</style>

